import React, { useEffect, useState } from 'react'
import { AutoComplete, Input, Form, Button, Modal } from "antd"
import { book } from '@/services/ant-design-pro';
import { forecReturnBorrow, returnBorrow } from '@/services/ant-design-pro/borrow';

export default function Borrow() {
    const [options, setOptions] = useState<any>([]);
    const [searchWord, setSearchWord] = useState<string>("")
    const [bookId, setBookId] = useState<any>()
    const [form] = Form.useForm();
    const [isModalOpen, setOpen] = useState<boolean>(false)
    const handleSearch = (value: string) => {
        setSearchWord(value)
    };
    useEffect(() => {
        let valid = true
        book({ TXM: searchWord }).then(res => {
            if (valid) {
                setOptions(res.data.map(book => {
                    return {
                        value: book.title + "-" + book.bookId,
                        label: (<>{book.title + "-" + book.bookId}</>)
                    }
                }))
            }
        })
        return () => {
            valid = false
        }
    }, [searchWord])

    const onFinish = (value: any) => {
        const book = parseInt(value.book.split("-")[1] || "1")
        setBookId(book)
        returnBorrow({
            bookId: book
        }, setOpen).then(() => {
            form.resetFields()
        })
    };

    return (
        <div>
            <Modal title="提醒" open={isModalOpen} onOk={() => {
                forecReturnBorrow({
                    bookId: bookId
                })
                setOpen(false)
            }} onCancel={() => {
                setOpen(false)
            }}
                okText={"已经完成缴款"}
                cancelText={"取消"}
            >
                <p>学生目前有待缴的罚款，请缴费之后再还书。</p>
            </Modal>
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item
                    label="书籍条形码"
                    name="book"
                    rules={[{ required: true, message: '请选择书籍' }]}
                >
                    <AutoComplete
                        dropdownMatchSelectWidth={252}
                        style={{ width: 300 }}
                        options={options}
                        onSearch={handleSearch}
                    >
                        <Input.Search size="large" placeholder="input here" enterButton />
                    </AutoComplete>
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    &nbsp;
                    <Button htmlType="reset">
                        重置
                    </Button>
                </Form.Item>
            </Form>
        </div >
    )
}
